---
title: Blur Fade
date: 2024-07-07
description: Blur fade in and out animation. Used to smoothly fade in and out content.
author: dillionverma
published: true
---

<ComponentPreview name="blur-fade-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/blur-fade
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="blur-fade" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="blur-fade-text-demo" />

## Usage

```tsx showLineNumbers
import { BlurFade } from "@/components/ui/blur-fade"
```

```tsx showLineNumbers
<BlurFade>
  <img src="https://picsum.photos/300/200?random=1" alt="Sample 1" />
  <img src="https://picsum.photos/300/200?random=2" alt="Sample 2" />
  <img src="https://picsum.photos/300/200?random=3" alt="Sample 3" />
</BlurFade>
```

## Props

| Prop           | Type              | Default   | Description                                                 |
| -------------- | ----------------- | --------- | ----------------------------------------------------------- |
| `children`     | `React.ReactNode` | `-`       | The content to be animated                                  |
| `className`    | `string`          | `-`       | The class name to be applied to the component               |
| `variant`      | `object`          | `-`       | Custom animation variants for motion component              |
| `duration`     | `number`          | `0.4`     | Duration (seconds) for the animation                        |
| `delay`        | `number`          | `0`       | Delay (seconds) before the animation starts                 |
| `offset`       | `number`          | `6`       | Offset for the animation                                    |
| `direction`    | `string`          | `"down"`  | Direction for the animation (`up`, `down`, `left`, `right`) |
| `inView`       | `boolean`         | `false`   | Whether to trigger animation when component is in view      |
| `inViewMargin` | `MarginType`      | `"-50px"` | Margin for triggering the in-view animation                 |
| `blur`         | `string`          | `"6px"`   | Amount of blur to apply during the animation                |
